<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('ILKSCtVN7iRlEPEpN8C-i')}}</p>
      <div class="operate-area">
        <div class="inline-item search-item">
          <Input v-model="phoneNumber" @on-enter="searchTable">
            <span slot="prepend">{{$t('yacjguB_IxMceP1QpX80j')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchTable"
            ></Button>
          </Input>
        </div>
        <div class="inline-item search-item">
          <Input v-model="phoneOwnerName" @on-enter="searchTable">
            <span slot="prepend">{{$t('xPwJJXElH7uH9fYpuGhBU')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchTable"
            ></Button>
          </Input>
        </div>
      </div>
      <Table :loading="loading" :columns="columns" :data="data"> </Table>
      <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </Card>
    <Modal
      v-model="modal"
      :title="modalTitle"
      footer-hide
      :mask-closable="false"
      draggable
    >
      <form-info :data="formData" @close="modal = false" @success="success" />
    </Modal>
  </div>
</template>

<script>
import { getAppUserManageInfo } from '@/api/data2'
import FormInfo from './component/form-info'

export default {
  name: 'app_user_manage',
  components: {
    FormInfo
  },
  data () {
    return {
      modalTitle: this.$t('oe_-qX-oDi8LvVpBqZnHM'),
      modal: false,
      phoneNumber: '',
      phoneOwnerName: '',
      loading: false,
      editIndex: 0,
      formData: {
        phoneNumber: '',
        phoneOwnerName: '',
        LicensePlateNumber: '',
        firstLoadTime: '',
        loveBusType: '',
        pwd: '',
        userStatus: ''
      },
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('yacjguB_IxMceP1QpX80j'),
          key: 'phoneNumber'
        },
        {
          title: this.$t('xPwJJXElH7uH9fYpuGhBU'),
          key: 'phoneOwnerName'
        },
        {
          title: this.$t('IjIPS4LeBCiI7e3iPsTn6'),
          key: 'LicensePlateNumber'
        },
        {
          title: this.$t('roFLXyzn30j8fhMvZjJjW'),
          width: 150,
          key: 'firstLoadTime'
        },
        {
          title: this.$t('rLEYDXEjZlsLVr6__G3_c'),
          key: 'sumConsume'
        },
        {
          title: this.$t('eyENjg4PDnj6Ss-_pCAFC'),
          key: 'loveBusType'
        },
        {
          title: this.$t('a-LXwsl7nkF5v_u7gORNm'),
          key: 'pwd'
        },
        {
          title: this.$t('nU8fgzzD-ZIMaR5OEUIl7'),
          key: 'userStatus',
          render: (h, params) => {
            const { userStatus } = params.row
            // userStatus === '1' ? '正常' : '禁止'
            return userStatus === '1'
              ? h(
                'Tag',
                {
                  props: {
                    color: 'success'
                  }
                },
                [this.$t('QIZvAsyWg4JA7KBDYWaqh')]
              )
              : h(
                'Tag',
                {
                  props: {
                    color: 'error'
                  }
                },
                [this.$t('hYm6DWtlkZZH_iHErAxF-')]
              )
          }
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          width: 100,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  style: {
                    // marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem(params.index)
                    }
                  }
                },
                this.$t('3cH_U2GeBUW1V74W8oDNv')
              )
            ])
          }
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20]
    }
  },
  created () {
    this.queryTable()
  },
  methods: {
    searchTable () {
      this.queryTable()
    },
    async queryTable ({
      current = this.current,
      pageSize = this.pageSize,
      phoneNumber = this.phoneNumber,
      phoneOwnerName = this.phoneOwnerName
    } = {}) {
      this.loading = true
      const res = await getAppUserManageInfo({
        pageSize,
        current,
        phoneNumber,
        phoneOwnerName
      })
      this.data = res.tableData
      this.total = res.total
      this.loading = false
    },
    changePage (num) {
      this.current = num
      this.queryTable()
    },
    changePageSize (num) {
      this.pageSize = num
      this.queryTable()
    },
    editItem (index) {
      this.editIndex = index
      const item = this.data[index]
      this.formData = _.cloneDeep(item)
      this.modal = true
    },
    success (data) {
      this.$set(this.data, this.editIndex, data)
      this.$Message.success(this.$t('rJ9uXBlTbaC-gCrMJyhCy'))
      this.modal = false
    }
  }
}
</script>
